<template>
  <div class="app-container calendar-list-container">
    <basic-container>
      <el-form
        :model="searchForm"
        ref="searchFormRef"
        label-width="80px"
        :inline="true"
        size="small"
      >
        <el-form-item label="属性名称">
          <el-input v-model="searchForm.Name" clearable></el-input>
        </el-form-item>
        <el-form-item label="所属分类">
          <el-select v-model="searchForm.ParentId" placeholder="请选择" clearable>
            <el-option
              v-for="item in aList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="searchChange">查询</el-button>
          <el-button icon="el-icon-delete" @click="handleClear">重置</el-button>
        </el-form-item>
      </el-form>
      <avue-crud
        ref="crud"
        :option="tableOption"
        :data="list"
        :page="page"
        v-model="form"
        :table-loading="listLoading"
        @on-load="getList"
        @size-change="sizeChange"
        @current-change="currentChange"
        @selection-change="selectionChange"
        @refresh-change="refreshChange"
      >
        <template slot="menuLeft">
          <el-button
            v-if="menuPermissions_btn_add"
            class="filter-item"
            type="primary"
            icon="el-icon-plus"
            @click="handleCreate"
          >添加</el-button>
          <el-button
            v-if="menuPermissions_btn_del"
            :disabled="menuPermissions_del"
            class="filter-item"
            type="primary"
            icon="el-icon-delete"
            @click="handleDelete()"
          >批量删除</el-button>
        </template>

        <template slot="menu" slot-scope="scope">
          <el-button
            v-if="menuPermissions_btn_edit"
            type="text"
            size="small"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row, scope.index)"
          >编辑</el-button>
        </template>
      </avue-crud>
    </basic-container>
    <el-dialog :visible.sync="addArgumentVisible" title="新增" width="60%" @close="addItemVisible">
      <el-form :model="addForm" ref="addForm" label-width="90px" size="small" :rules="addrules">
        <el-form-item label="属性名称" prop="Name">
          <el-input v-model="addForm.Name"></el-input>
        </el-form-item>
        <el-form-item label="所属分类" prop="GoodsTypeId">
          <el-select v-model="addForm.GoodsTypeId" placeholder="请选择" clearable>
            <el-option
              v-for="item in aList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>&nbsp;&nbsp;&nbsp;&nbsp;
        </el-form-item>
        <el-form-item label="提示信息" prop="Prompt">
          <el-input v-model="addForm.Prompt"></el-input>
        </el-form-item>
        <el-form-item label="单位" prop="Unit">
          <el-input v-model="addForm.Unit"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="Sort">
          <el-input v-model="addForm.Sort"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addFormSubmit('addForm')">保存</el-button>
        <el-button icon @click="addArgumentVisible = fasle">取消</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="editArgumentVisible" title="编辑" width="60%" @close="editItemVisible">
      <el-form :model="editForm" ref="editForm" label-width="90px" size="small" :rules="editrules">
        <el-form-item label="属性名称" prop="Name">
          <el-input v-model="editForm.Name"></el-input>
        </el-form-item>
        <el-form-item label="提示信息" prop="Prompt">
          <el-input v-model="editForm.Prompt"></el-input>
        </el-form-item>
        <el-form-item label="单位" prop="Unit">
          <el-input v-model="editForm.Unit"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="Sort">
          <el-input v-model="editForm.Sort"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editFormSubmit('editForm')">保存</el-button>
        <el-button icon @click="editArgumentVisible = fasle">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getArgumentList,
  addArgument,
  updateArgument,
  deleteArgument,
} from "@/api/platProduct/argument";
import { getCategoryType } from "@/api/platProduct/category";
import { tableOption } from "@/const/crud/platProduct/product-argument";
export default {
  name: "productArgument",
  data() {
    return {
      tableOption: tableOption,
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20, // 每页显示多少条
      },
      list: [],
      listLoading: false,
      form: {},
      menuPermissions_btn_add: true,
      menuPermissions_btn_edit: true,
      menuPermissions_btn_del: true,
      aList: [],
      code: "", //存放上次的code
      searchForm: {
        Name: "",
        ParentId: "",
      },
      //批量删除
      menuPermissions_del: true,
      Ids: [],
      //弹出框
      addForm: {
        GoodsTypeId: "",
        Name: "",
        Prompt: "",
        Unit: "",
        Sort: "",
      },
      editForm: {},
      addArgumentVisible: false,
      editArgumentVisible: false,
      addrules: {
        Name: [{ required: true, message: "请输入属性名称", trigger: "blur" }],
        GoodsTypeId: [
          { required: true, message: "请输入所属大类", trigger: "blur" },
        ],
        Prompt: [
          { required: true, message: "请输入提示信息", trigger: "blur" },
        ],
        Unit: [{ required: true, message: "请输入单位", trigger: "blur" }],
        Sort: [{ required: true, message: "请输入排序", trigger: "blur" }],
      },
      editrules: {
        Name: [{ required: true, message: "请输入属性名称", trigger: "blur" }],
        Prompt: [
          { required: true, message: "请输入提示信息", trigger: "blur" },
        ],
        Unit: [{ required: true, message: "请输入单位", trigger: "blur" }],
        Sort: [{ required: true, message: "请输入排序", trigger: "blur" }],
      },
    };
  },
  methods: {
    //获取分类下拉框信息
    //一级
    getCategoryTypeOne(ID) {
      let params = {
        ParentId: ID,
        SelectId: "",
      };
      getCategoryType(params)
        .then((res) => {
          if (res.data.code == 0) {
            let data = res.data.data;
            let dicData = [];
            data.forEach((ele) => {
              var obj = {
                label: ele.Text,
                value: ele.Value,
              };
              dicData.push(obj);
            });
            this.aList = dicData;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getList(page) {
      let _param = {
        GoodsTypeId: this.searchForm.ParentId,
        Name: this.searchForm.Name,
      };
      let _jsonData = Object.assign(_param, {
        page: page.currentPage,
        limit: page.pageSize,
      });
      this.listLoading = true;
      getArgumentList(_jsonData)
        .then((res) => {
          if (res.status == 200) {
            if (res.data.code == 0) {
              this.list = res.data.data.Data;
              this.page.total = res.data.data.Cnt;
              this.listLoading = false;
            }
          }
        })
        .catch((error) => {
          console.log(error);
          this.listLoading = false;
        });
    },
    searchChange() {
      this.page.currentPage = 1;
      this.getList(this.page);
    },
    handleClear(){
        this.searchForm = {};
    },
    refreshChange() {
      this.getList(this.page);
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    currentChange(current) {
      this.page.currentPage = current;
    },
    //新增
    handleCreate(row) {
      this.addArgumentVisible = true;
      this.getCategoryTypeOne(0);
    },
    addItemVisible() {
      this.addArgumentVisible = false;
    },
    addFormSubmit() {
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          addArgument(this.addForm)
            .then((res) => {
              if (res.status == 200) {
                this.$message.success(res.data.msg);
                this.addArgumentVisible = false;
                this.addForm = {};
                this.getList(this.page);
              }
            })
            .catch((error) => {
              console.log(error);
            });
        }
      });
    },

    //编辑
    handleUpdate(row, index) {
      this.editArgumentVisible = true;
      this.editForm = Object.assign({}, row);
    },
    editItemVisible() {
      this.editArgumentVisible = false;
    },
    editFormSubmit() {
      this.$refs["editForm"].validate((valid) => {
        if (valid) {
          let params = {
            Id: this.editForm.Id,
            Name: this.editForm.Name,
            Prompt: this.editForm.Prompt,
            Unit: this.editForm.Unit,
            Sort: this.editForm.Sort,
          };
          updateArgument(params).then((res) => {
            this.$message({
              message: res.data.msg,
              type: "success",
            });
            this.editArgumentVisible = false;
            this.getList(this.page);
          }).catch(error=>{
            console.log(error);
          });
        }
      });
    },

    //选中
    selectionChange(selection) {
      if (selection.length > 0) {
        this.menuPermissions_del = false;
        this.Ids = [];
        selection.forEach((element) => {
          this.Ids.push(element.Id);
        });
      } else {
        this.Ids = [];
        this.menuPermissions_del = true;
      }
    },
    handleDelete() {
      let Ids = {
        Ids: this.Ids,
      };
      this.$confirm("此操作将永久删除数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteArgument(Ids)
          .then((res) => {
            if (res.status == 200) {
              if (res.data.code == 0) {
                this.$message.success(res.data.msg);
                this.getList(this.page);
              }
            }
          })
          .catch((error) => {
            console.log(error);
          });
      });
    },
  },
  created() {
    this.getCategoryTypeOne(0);
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
</style>